<template>
  <div>
    <div class="com-top-nav">
      <van-nav-bar
        title="工作台"
      />
    </div>
    <div class="container">
      <van-tabs v-model="active">
        <van-tab v-for="index in 3" :title="title[index-1]" :key="index">
          <van-pull-refresh class="refresh-container" v-model="isLoading" @refresh="onRefresh">
            <task-list-item1 v-show="active==0" link="/home/taskDetail">
              <div slot="bottom" class="bottom">
                <span>恭喜您，该任务已完成啦~</span>
                <a href="javascript:;">进行中</a>
              </div>
            </task-list-item1>
               <task-list-item2 v-show="active==1" link="/home/taskDetail">
              <div slot="bottom" class="bottom">
                <span>恭喜您，该任务已完成啦~</span>
                <a href="javascript:;">进行中</a>
              </div>
            </task-list-item2>
            <task-list-item3 v-show="active==2" link="/home/taskDetail">
              <div slot="bottom" class="bottom">
                <span>恭喜您，该任务已完成啦~</span>
                <a href="javascript:;">进行中</a>
              </div>
            </task-list-item3>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
    <bottom-person-nav/>
  </div>
</template>
<script>
  import bottomNav from '../components/person-nav.vue';
  import taskListItem1 from '../components/task-list-item/job-sigin.vue';
  import taskListItem2 from '../components/task-list-item/job-doing.vue';
  import taskListItem3 from '../components/task-list-item/job-end.vue';

  import Vue from 'vue'
  import {NavBar, Tab, Tabs} from 'vant';

  Vue.use(NavBar).use(Tab).use(Tabs);
  export default {
    data(){
      return {
        active: 0,
        title: ['已报名','进行中', '已完成'],
        count: 0,
        isLoading: false
      }
    },
    components: {
      'bottom-person-nav': bottomNav,
      taskListItem1,taskListItem2,taskListItem3
    },
    methods: {
      onRefresh() {
        setTimeout(() => {
          this.$toast('刷新成功');
          this.isLoading = false;
          this.count++;
        }, 500);
      }
    }
  }
</script>

<style scoped lang="less" type="text/less">
  @import url('../../static/style/bottom-person-nav.less');

  .refresh-container {
    min-height: calc(~"100vh - 90px");
  }
  .demo-color-btn {
    margin: 8px;
  }

  .bottom {
    padding: 0 10px 10px 10px ;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #a6a6a6;
    a {

    }
  }
</style>
